import React,{memo,useState} from 'react'
import { Select, Space,Switch ,Slider} from 'antd';
import bai from '../../../assets/img/bai.png';
import hei from '../../../assets/img/hei.png';
import type { SliderSingleProps } from 'antd';

function TongYong(props:any,ref) {
  const [index,setIndex] = useState(0)
  const marks: SliderSingleProps['marks'] = {
    0: '小',
    25: '标准',
    50: ' ',
    75: ' ',
    100: "大"
  };

  const onIndex = (index)=>{
    setIndex(index);
  }
  const handleChange = ()=>{}

  return <>
     <div className="sz-item-main">
       <div className="sz-kp">
         <div className="sz-kp-biaoti">外观设置</div>
         <div className="sz-kp-liebiao sz-kp-lb1">
            <div onClick={()=>onIndex(0)} className="lb-box">
              <img className={`${index === 0?'imgColor':''}`} src={bai}/>
              <div className={`${index === 0?'imgColor':''}`}>白色模式</div>
            </div>
            <div onClick={()=>onIndex(1)} className="lb-box">
              <img className={`${index === 1?'imgColor':''}`} src={hei}/>
              <div className={`${index === 1?'imgColor':''}`}>黑色模式</div>
            </div>
         </div>

       </div>
       <div className="sz-kp">
         <div className="sz-kp-biaoti">聊天</div>
         <div className="sz-kp-liebiao ">
           <div className="sz-kp-item">
             <div>发送消息</div>
             <div>
               <Select
                 defaultValue="1"
                 style={{ height:25 }}
                 onChange={handleChange}
                 options={[
                   { value: '1', label: 'Enter' },
                   { value: '2', label: '⌘ + Enter / Ctrl + Enter' },
                 ]}
               />
             </div>
           </div>
           <div className="sz-kp-item">
             <div>双击会话打开独立窗口</div>
             <div>
               <Switch size="small" defaultChecked />
             </div>
           </div>
           <div className="sz-kp-item">
             <div>表情推荐</div>
             <div>
               <Switch size="small" defaultChecked />
             </div>
           </div>
           <div className="sz-kp-item">
             <div>快捷推送表情</div>
             <div>
               <Switch size="small" defaultChecked />
             </div>
           </div>
           <div style={{borderBottom:'none'}} className="sz-kp-item">
             <div>输入"/"唤起表情</div>
             <div>
               <Switch size="small" defaultChecked />
             </div>
           </div>
         </div>
       </div>
       <div className="sz-kp">
         <div className="sz-kp-biaoti">软件更新</div>
         <div className="sz-kp-liebiao ">
           <div style={{borderBottom:'none'}} className="sz-kp-item">
             <div>
               <div style={{height:20}}>有新版本时帮自动帮我下载并安装</div>
               <span style={{fontSize:12,color:"#797979"}}>
                 取消勾选将不再自动下载和更新</span>
             </div>
             <div>
               <Switch size="small" defaultChecked />
             </div>
           </div>
         </div>
       </div>
       <div className="sz-kp">
         <div className="sz-kp-biaoti">字体大小</div>
         <div className="sz-kp-liebiao ">
           <div className="sz-kp-item">
             <Slider style={{width:"100%"}} step={null}
                     tooltip={{ open: false }}
                     marks={marks} defaultValue={25} />
           </div>
         </div>
       </div>

     </div>
  </>

}

export default memo(TongYong)

